<template>
  <div style="width:500px;height:300px" ref="chart"></div>
</template>

<script>
export default {
  // 饼状图报警情况******
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      let myChart = this.$echarts.init(this.$refs.chart);
      console.log(this.$refs.chart); // 绘制图表
      myChart.setOption({
        // 控制提示
        tooltip: {
          trigger: "item",
          // 格式化提示内容：
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        }, // 控制图表
        series: [
          {
            // 图表名称
            name: "点位统计",
            // 图表类型
            type: "pie",
            radius: ["0%", "55%"],
            center: ["48%", "50%"],
            roseType: "radius",
            itemStyle: {
              normal: {
                label: {
                  // 提示文字样式
                  formatter: "{b|{b}：}\n{c|{c}}  {per|{d}%}  ",
                  rich: {
                    b: {
                      fontSize: 16,
                      lineHeight: 30,
                      color:'rgba(139,213,231,0.5)'
                    },
                    c:{
                      fontSize: 20,
                       color:'#F56B6A'
                    },
                    per: {
                       fontSize: 20,
                      color: "#F56B6A",
                      padding: [2, 4],   
                    }
                  }
                }
              }
            },

            // 关闭鼠标经过动态
            hoverOffset: 0,
            // 数据
            data: [
              { value: 20, name: "商品交易所支行" },
              { value: 30, name: "瓦房支行" },
              { value: 40, name: "杭州新区支行" },
              { value: 50, name: "上海社区支行" },
              { value: 60, name: "旅顺支行" }
            ],
            // 文字样式
            label: {
              fontSize: 10
            },
            // 引导线
            labelLine: {
              // 连接图形
              length: 9,
              // 连接文字
              length2: 10,
              lineStyle: {
                color: "rgba(139,213,231,0.5)"
              }
            }
          }
        ],
        // 设置颜色
        color: [
          "rgba(245,107,106,0.4)",
          "rgba(245,107,106,0.6)",
          "rgba(245,107,106,0.8)",
          "rgba(245,107,106,0.9)",
          "rgba(245,107,106)",
        ]
      });
    }
  }
};
</script>

<style>
</style>